<template>
  <view class="team">
    <view class="team-top">
      <view class="row1">
        <view class="row1-left" :style="index == 0 ? '' : 'color:#6D6D84'">{{infomessage.todayCount}}</view>
        <view class="row1-right" :style="index == 1 ? '' : 'color:#6D6D84'">{{infomessage.totalCount}}</view>
      </view>
      <view class="row2"><lgd-tab :tabValue="tabValue" @getIndex="getIndex" /></view>
    </view>
    <view class="team-main" v-if="list.length">
      <view class="main-top">
		<view class="left">粉丝ID</view>
        <view class="center">昵称</view>
		<view class="right">{{index == 0 ? '今日团队下单量' : '累计团队下单量'}}</view>
      </view>
      <view class="main-list" v-for="(item,index) in list" :key='index'>
        <view class="item-left">{{item.shortid}}</view>
        <view class="item-center">{{item.nickName}}</view>
        <view class="item-right">{{item.count}}</view>
      </view>
    </view>
	<view class="flex_center nodata" v-else>
		~暂无数据~
	</view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      tabValue: ['今日组团', '累计组团'],
      index: 0,
	  infomessage:{},
	  finished:false,
	  pageIndex:1,
	  pageSize:10,
	  list:[]
    };
  },
  computed:{
  },
  methods: {
    getIndex(index) {
      this.index = index;
	  this.pageIndex = 1 
	  this.list = []
	  this.getList()
    },
	getList(){
			  if(this.index == 0){
				  this.$ajax('api/Member/QueryMyZuTuan',{pageIndex:this.pageIndex,pageSize:this.pageSize}).then(res=>{
				  				  this.infomessage = res.Data
				  				  if (res.Data.todayList.length) {
				  				  	this.list = this.list.concat(res.Data.todayList);
				  				  	this.pageIndex++;
				  				  	this.finish = false;
				  				  } else {
				  				  	this.finish = true;
				  				  }
				  })
			  }else if(this.index == 1){
				  this.$ajax('api/Member/QueryMyZuTuan',{pageIndex:this.pageIndex,pageSize:this.pageSize}).then(res=>{
				  				  this.infomessage = res.Data
				  				  if (res.Data.totalList.length) {
				  				  	this.list = this.list.concat(res.Data.totalList);
				  				  	this.pageIndex++;
				  				  	this.finish = false;
				  				  } else {
				  				  	this.finish = true;
				  				  }
				  })
			  }
	}
  },
  onShow() {
  	  this.pageIndex =1
  	  this.list = []
  	this.getList()
  },
  onReachBottom() {
  	if(!this.finished){
  		this.getList()
  	}
  }
};
</script>

<style lang="scss">
.team {
  width: 100vw;
  height: 100vh;
  background-color: #e9eaed;
  .team-top {
    width: 100%;
    height: 169rpx;
    background-color: #202029;
    overflow: hidden;
    .row1 {
      margin-top: 51rpx;
      color: #ffffff;
      font-size: 32rpx;
      display: flex;
      .row1-left {
        flex: 50%;
        display: flex;
        justify-content: center;
      }
      .row1-right {
        flex: 50%;
        display: flex;
        justify-content: center;
      }
    }
  }
  .team-main {
    width: 690rpx;
	padding-bottom: 20rpx;
    background-color: #ffffff;
    margin-left: 30rpx;
    margin-top: 32rpx;
    border-radius: 26rpx;
    .main-top {
      height: 90rpx;
      border-bottom: 1rpx solid #E0E0E0;
      display: flex;
      line-height: 90rpx;
	  .left{
		  flex: 30%;
		  display: flex;
		  justify-content: center;
		  color: #8E8EA2;
		  font-size: 26rpx;
	  }
	  .center{
	  		  flex: 40%;
	  		  display: flex;
	  		  justify-content: center;
	  		  color: #8E8EA2;
	  		  font-size: 26rpx;
	  }
	  .right{
	  		  flex: 30%;
	  		  display: flex;
	  		  justify-content: center;
	  		  color: #8E8EA2;
	  		  font-size: 26rpx;
	  }
    }
    .main-list {
      display: flex;
      margin-top: 46rpx;
      .item-left {
        flex: 30%;
        display: flex;
        justify-content: center;
        color: #333333;
        font-size: 26rpx;
        font-weight: 700;
      }
	  .item-center {
	    flex: 40%;
	    display: flex;
	    justify-content: center;
	    color: #333333;
	    font-size: 26rpx;
	    font-weight: 700;
	  }
      .item-right {
        flex: 30%;
        display: flex;
        justify-content: center; 
        color: #F36450;
        font-size: 26rpx;
        font-weight: 700;
      }
    }
  }
}
</style>
